<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { queryUsers } from '@/api/system/role';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import TableLayout from '@/layout/table-layout.vue';
  import { isArray } from '@/utils/is';

  interface StaffItem {
    staffName: string;
    staffId: string;
  }

  const props = withDefaults(
    defineProps<{
      type?: 'radio' | 'checkbox';
      echoData?: StaffItem[] | StaffItem;
    }>(),
    {
      type: 'checkbox',
    }
  );

  const labelArr = ref<StaffItem[]>([]);

  const modelValue = defineModel<string | string[]>({
    default: '',
  });

  const staffSelected = computed<string[]>({
    get() {
      const multiple = props.type === 'checkbox';

      if (multiple) {
        return modelValue.value as string[];
      }
      return [modelValue.value as string];
    },
    set(val) {
      const multiple = props.type === 'checkbox';

      if (!multiple) {
        if (val && val.length > 0) {
          const [v] = val;
          modelValue.value = v;
        } else {
          modelValue.value = '';
        }
        return;
      }
      modelValue.value = val;
    },
  });

  watch(
    () => props.echoData,
    (val) => {
      if (!val) {
        return;
      }
      if (isArray(val)) {
        labelArr.value = val;
        staffSelected.value = val.map((e) => e.staffId);
      } else {
        labelArr.value = [val as StaffItem];
        staffSelected.value = [val?.staffId as string];
      }
    },
    {
      immediate: true,
    }
  );

  const rowSelection = {
    type: props.type,
    onlyCurrent: false,
    showCheckedAll: false,
  };

  const modalVisible = ref(false);

  const showModal = () => {
    modalVisible.value = true;
  };

  const deptId = ref('');

  const userPage = usePageTable({
    create: false,
    searchForm: {
      state: {
        staffName: '',
        staffId: '',
        staffStatus: '',
        createTime: [],
      },
    },
    table: {
      rowKey: 'staffId',
      apiFun: queryUsers,
      getQueryParams() {
        return {
          departmentId: deptId.value,
        };
      },
      columns: [
        {
          title: 'ID',
          dataIndex: 'staffId',
          width: 200,
          align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'staffName',
          width: 200,
          align: 'center',
        },
        {
          title: '账号',
          dataIndex: 'staffPhone',
          width: 300,
        },
        {
          title: '状态',
          dataIndex: 'staffStatusLabel',
          width: 100,
          align: 'center',
        },
      ],
    },
  });

  const onRowSelect = (rowKeys: string[], rowKey: string, record: any) => {
    if (rowKeys.includes(rowKey)) {
      labelArr.value.push(record);
    } else {
      labelArr.value = labelArr.value.filter((e) => {
        return e.staffId !== rowKey;
      });
    }
  };

  const onStaffDelete = (index: number) => {
    labelArr.value.splice(index, 1);
    staffSelected.value.splice(index, 1);
  };

  const onDeptChange = () => {
    userPage.reload();
  };
</script>

<template>
  <div>
    <a-modal
      v-model:visible="modalVisible"
      :hide-cancel="true"
      width="1200px"
      title="选择用户"
    >
      <div class="flex">
        <div class="w-1/6">
          <dept-select v-model="deptId" mode="tree" @select="onDeptChange" />
        </div>
        <a-divider direction="vertical" />
        <TableLayout
          v-model:selected-keys="staffSelected"
          :row-selection="rowSelection"
          class="flex-1"
          v-bind="userPage.bindProps"
          @select="onRowSelect"
        >
          <template #searchForm="{ state }">
            <a-form-item field="staffName" label="姓名" label-col-flex="60px">
              <a-input
                v-model="state.staffName"
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>

            <a-form-item field="staffId" label="账号" label-col-flex="60px">
              <a-input
                v-model="state.staffId"
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>
          </template>

          <template #action>
            <a-space>
              <a-button type="primary"> 编辑 </a-button>
            </a-space>
          </template>
        </TableLayout>
      </div>
    </a-modal>
    <span
      class="staff-wrapper arco-select-view arco-select-view-size-medium arco-select-view-has-tag arco-select-view-has-suffix arco-select-view-multiple arco-select"
    >
      <span class="arco-select-view-inner f1">
        <a-tag
          v-for="(item, index) in labelArr"
          :key="index"
          bordered
          closable
          :visible="true"
          color="blue"
          @close="onStaffDelete(index)"
          >{{ item.staffName }}
        </a-tag>
      </span>
      <span class="arco-select-view-suffix cursor-pointer" @click="showModal">
        <icon-right />
      </span>
    </span>
  </div>
</template>

<style lang="less" scoped>
  .staff-wrapper {
    height: 32px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .arco-select-view-inner {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;

    .arco-select-view-suffix {
      border-color: #e5e7eb;
    }
  }
</style>
